<template>
  <div class="settle-accounts">
    <div class="money">
      <div class="title">总金额</div>
      <div class="money-content">￥{{price}}.00</div>
      <div class="freight">免运费</div>
    </div>
    <button class="btn"
            @click="handleSubmit">结算</button>
  </div>
</template>
<script>
import { codeTime } from '@/assets/js/util'
import commonWx from '@/assets/js/wx'
export default {
  name: 'CommonAccounts',
  props: ['price', 'username', 'phone', 'address', 'list', 'flag', 'coupon_id', 'isCheck', 'isSelect'],
  methods: {
    handleSubmit () {
      if (this.address === '') {
        this.$tip('地址不能为空，请在微信中填写地址')
        this.$router.push('/')
        return
      }
      if (!this.isCheck) {
        this.$tip('请选择支付方式')
        return
      }
      if (!this.isSelect) {
        this.$tip('请确认免责协议')
        return
      }
      this.buy()
    },
    buy () {
      const data = {
        username: '',
        phone: '',
        address: '',
        list: this.list,
        flag: this.flag,
        coupon_id: this.coupon_id
      }
      console.log(data)
      this.$api.detail.createdOrder({ ...data })
        .then(this.buySucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    buySucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.pay(data.timeStamp, data.nonceStr, data.package, data.signType, data.paySign, this.paySucc, this.cancle, this.fail)
      }
    },
    pay (timestamp, nonceStr, packages, signType, paySign, fn, cancle, fail) {
      codeTime(commonWx.getCode).then((res) => {
        commonWx.choosePay(timestamp, nonceStr, packages, signType, paySign, fn, cancle, fail)
      })
    },
    paySucc (res) {
      this.$router.push({
        path: '/me/order'
      })
    },
    cancle (res) {
      this.$router.push({
        path: '/me/order'
      })
    },
    fail (res) {
      this.$router.push({
        path: '/me/order'
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.settle-accounts
  width 100%
  position fixed
  bottom 0
  left 0
  height 98px
  background $common_bgc
  display flex

  .money
    flex 1
    display flex
    align-items center
    height 100%
    justify-content center

    .title
      font-size $address_name
      font-weight 400
      color $footer_bgc

    .money-content, .freight
      font-size $address_name
      font-weight 400
      color $tab_active

    .freight
      font-size $delete
      margin-left 10px

  .btn
    width 286px
    height 98px
    background linear-gradient(-18deg, rgba(255, 87, 34, 1), rgba(255, 152, 0, 1))
    font-size $back_fz
    font-weight 400
    color $common_bgc
    text-shadow 0px 2px 2px rgba(5, 5, 5, 0.14)
    border none
</style>
